// 获取图片元素和按钮元素
var pic = document.querySelectorAll('.pic');
var leftBtn = document.querySelector('.leftBtn');
var rightBtn = document.querySelector('.rightBtn');
var swiper = document.querySelector('.swiper');
var circle = document.querySelector('.circle');
var index = 0;
// 右边按钮的切换功能
for (var i = 0; i < pic.length; i++) {
	// 给每个图片添加索引
	pic[i].setAttribute('index', i);
}
// 给按钮添加事件
rightBtn.addEventListener('click', rightShift);

function rightShift() {
	// 点击过后把所有图片隐藏
	for (var j = 0; j < pic.length; j++) {
		pic[j].className = 'pic';
		// 隐藏小圆圈背景颜色
		lis[j].className = 'clearColor';
	}
	// 索引来显示当前图片
	if (index < pic.length - 1) index++;
	else index = 0;

	pic[index].className = 'pic active';
	// 给小圆圈添加背景颜色
	lis[index].className = 'liColor';
}
// 给左边按钮写切换功能
leftBtn.addEventListener('click', leftShift);

function leftShift() {
	// 点击过后把所有pic隐藏
	for (var j = 0; j < pic.length; j++) {
		pic[j].className = 'pic';
		// 隐藏小圆圈背景颜色
		lis[j].className = 'clearColor';
	}
	// 索引来显示当前图片
	if (index >= 1) index--;
	else index = 4;
	pic[index].className = 'pic active';
	// 给小圆圈添加背景颜色
	lis[index].className = 'liColor';
}

// 自动轮播效果
var autoPlay = setInterval(autoChange, 2000);

function autoChange() {
	// 隐藏所有图片
	for (var j = 0; j < pic.length; j++) {
		pic[j].className = 'pic';
		// 隐藏所有圆形背景颜色
		lis[j].className = 'clearColor';
	}
	if (index < pic.length - 1) index++;
	else index = 0;
	pic[index].className = 'pic active';
	// 给小圆圈添加背景颜色
	lis[index].className = 'liColor';
}
// 鼠标移入图片停止计时器 , 显示按钮
swiper.addEventListener('mouseover', stopChange);

function stopChange() {
	clearInterval(autoPlay);
	leftBtn.style.display = 'block';
	rightBtn.style.display = 'block';
}
// 鼠标移出图片开始计时器,隐藏按钮
swiper.addEventListener('mouseout', startChange);

function startChange() {
	autoPlay = setInterval(autoChange, 2000);
	leftBtn.style.display = 'none';
	rightBtn.style.display = 'none';
}
// 动态生成小圆点
for (var i = 0; i < pic.length; i++) {
	var li = document.createElement('li');
	circle.appendChild(li);
}
// 获取生成的小圆点
var lis = document.querySelectorAll('.circle li');
for (var i = 0; i < lis.length; i++) {
	lis[i].setAttribute('index', i); //给li编号
}
// 初始化给第一个li添加类名
lis[0].className = 'liColor';
//点击小圆圈，切换图片功能
for (var i = 0; i < lis.length; i++) {
	lis[i].addEventListener('click', circleClick)
}

function circleClick() {
	for (var i = 0; i < lis.length; i++) {
		lis[i].className = 'clearColor';
		pic[i].className = 'pic';
	}
	// 被点击的小圆圈改变样式
	this.className = 'liColor';
	// 得到被点击的index，this指向被点击的按钮的index
	index = this.getAttribute('index');
	pic[index].className = 'pic active';
}
